<template>
    <admin-view>
        <admin-section>

            <admin-card>
                <div>
                    <el-radio-group
                            v-model="status"
                            size="small"
                            style="float: right"
                            @change="onStatusChange">
                        <el-radio-button label="全部" ></el-radio-button>
                        <el-radio-button label="待审核" ></el-radio-button>
                    </el-radio-group>
                </div>
                <div>
                    <el-table
                            :data="clubs.items"
                    >
                        <el-table-column
                                label="站子"
                                prop="club_name"
                        >
                        </el-table-column>
                        <el-table-column
                            label="名称"
                            prop="name"
                        ></el-table-column>
                        <el-table-column
                                label="手机号"
                                prop="phone"
                            ></el-table-column>
                        <el-table-column
                            label="微博"
                            prop="club_weibo"
                        ></el-table-column>
                        <el-table-column
                            label="QQ"
                            prop="qq"
                        ></el-table-column>
                        <el-table-column
                            prop="status"
                            label="状态"
                        >
                            <template slot-scope="club">
                                <span :class="{
                                    'x':true,
                                    'wait': club.row.status === 1,
                                    'ok': club.row.status === 2,
                                    'fail': club.row.status === 3,
                                }">
                                    {{applyStatus[club.row.status]}}
                                </span>

                            </template>
                        </el-table-column>
                        <el-table-column
                        label="提交时间"
                        prop="create_time">
                            <template slot-scope="club">
                                {{club.row.create_time | TimeFormat }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                        >
                            <template slot-scope="club">
                                <el-button
                                        :disabled="club.row.status !== 1"
                                        type="text"
                                        size="mini"
                                        @click="onApply(club.row.uid)">审核</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div style="float: right" class="foot">
                    <el-pagination
                            background
                            layout="total, prev, pager, next, jumper"
                            :page-size="20"
                            :total="clubs.total"
                            @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </admin-card>
        </admin-section>
    </admin-view>
</template>

<script lang="ts">

    import {AdminView,AdminCard,AdminLabel,AdminSection} from '@/views/layout'
    import {Vue,Component} from 'vue-property-decorator'
    import {Api} from '@/api/stars'
    import Filter from '@/libs/filter'

    @Component({
        name:"AdminClubApplyList",
        components: {
            AdminView,
            AdminCard,
            AdminSection
        },
        filters: Filter
    })
    export default class AdminClubApplyList extends Vue {

        status:any = "全部";
        applyStatus = [
            "未提交",
            "待审核",
            "审核通过",
            "审核拒绝",
            "不存在",
        ];

        clubs:Api.Stars.GetClubApplyListResponse = {
            items :[],
            total:0,
        };

        page:number = 0;

        handleCurrentChange(page:number) {

            page = page -1

            if(page * 20 < this.clubs.total) {
                this.page = page
                this.loadView()
            }
        }

        loadView() {


            Api.Stars.GetClubApplyList({
                page:this.page,
                all:this.status === "全部",
            }).then((ack) => {
                console.log(ack)
                this.clubs = ack
            })
        }

        onStatusChange() {
            this.loadView()
        }

        mounted() {
            this.loadView()
        }

        onApply(id:any) {
            this.$router.push({
                path:`/apply/club/view/${id}`
            })
        }
    }


</script>

<style lang="scss" scoped>

    .x {
        font-size: 14px;
    }
    .wait {
        color: #E6A23C;
    }

    .ok {
        color: #67C23A;
    }

    .fail {
        color: #F56C6C;
    }

    .foot {
        padding-top: 10px;
    }
</style>